<?xml version="1.0" encoding="UTF-8"?>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
<html>
	<head>
		<title>Agenda do dia - OpenClinic</title>
		<meta name="viewport" content="user-scalable=yes, initial-scale=1.25, minimum-scale=1.0" />
		
		<link rel="stylesheet" href="<c:url value="/resources/css/core.css" />">
		<link rel="stylesheet" href="<c:url value="/resources/css/form.css" />">
		<link rel="stylesheet" href="<c:url value="/resources/css/style.css" />">
		<style type="text/css">
			body { padding: 10px; }
			h4 {
				color: #858585;
			    font-size: 14px;
			    font-weight: bold;
			}
			.logoContainer { padding-left: 22px; }
			.popover { display: block; }
			.popover-pointer { display: none; }
			
			.entry {
				background-color: #FFFFFF;
				border: 1px solid #CCCCCC;
				margin-bottom: 5px;
				padding: 10px;
			}
		</style>
		
		<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.8.2.min.js" />"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#loginAction").click(function(e) {
					e.preventDefault();
					$.ajax({
						url: '<c:url value="/auth.do" />',
						type: 'POST',
						dataType: 'json',
						data: {
							username: $("#username").val(),
							password: $("#password").val()
						},
						success: function(response) {
							if (response.success) {
								window.location = '<c:url value="/mobile" />';
							} else {
								$("#password").val('');
								$("#password").focus();
								$("#messageOutput")
									.html(response.message)
									.fadeIn()
									.delay(3000)
									.slideUp();
							}
						}
					});
				});
				
				$(".cancelAppointmentAction")
					.click(function(e) {
						e.preventDefault();
						
						if (confirm("A consulta sera cancelada e o horario da agenda ficara vago, deseja continuar?")) {
							$.ajax({
								url: '<c:url value="/appointment/cancel.action" />',
								dataType: 'json',
								data: {
									"appointmentId": $(this).attr("id")
								},
								type: 'POST',
								success: function(response) {
									window.location = '<c:url value="/mobile" />';
								}
							});
						}
					});
				
				<c:if test="${not empty errorMessage}">
					$("#messageOutput")
						.html("${errorMessage}")
						.fadeIn()
						.delay(3000)
						.slideUp();
				</c:if>
			});
		</script>
	</head>
	<body>
		<c:choose>
			<c:when test="${empty currentUser}">
				<div class="logoContainer">
					<img alt="" src="<c:url value="/resources/images/logo.png" />">
				</div>
				<div class="popover">
					<div class="popover-inner">
						<form method="post" action="<c:url value="/auth.do" />" class="form login-form">
							<p class="input-append">
								<input type="text" placeholder="Identifica&ccedil;&atilde;o " value="" id="username" name="username" maxlength="14">
							</p>
							<p class="input-append">
								<input type="password" placeholder="Senha " value="" id="password" name="password">
							</p>
							<button type="submit" id="loginAction" class="btn white">Entrar</button>
							<p id="messageOutput"></p>
						</form>
					</div>
					
					<div class="popover-pointer"></div>
				</div>
			</c:when>
			<c:otherwise>
				<div>
					<div style="float: right"><a href="<c:url value="/auth.do?logout" />" style="padding: 10px;">Logout</a></div>
					<h4>AGENDA DO DIA</h4>
				</div>
				<c:if test="${empty appointmentList}">
					<div>
						N&atilde;o h&aacute; consultas marcadas para voc&ecirc; hoje.
					</div>
				</c:if>
				<c:if test="${not empty appointmentList}">
					<c:forEach items="${appointmentList}" var="appointment">
						<div class="entry">
							<div style="float: right"><a id="${appointment.appointmentId}" href="#" class="cancelAppointmentAction"><img src="<c:url value="/resources/images/cancel.png" />" vspace="15" hspace="5"></a></div>
							<b><fmt:formatDate pattern="dd/MM HH:mm" value="${appointment.startDate}" /></b><br/>
							${appointment.customer.name}<br/>
							${appointment.medicalSpecialty.name}
						</div>
					</c:forEach>
				</c:if>
			</c:otherwise>
		</c:choose>
	</body>
</html>